<template>
  <div class="item">
    <el-dialog :visible.sync="visible">
      <div class="item-container">
        <div class="panelWrap item-content">
          <div class="title flex flexac flexjcsb fs14 cfff fwb pl p-r-20">
            <div>{{ isEdit ? '修改监管单位' : '添加监管单位' }}</div>
            <i class="el-icon-close" @click="handleCloseDialog" />
          </div>
          <div class="item-main flex flexdc flexcenter m-t-30">
            <div class="main-cont">
              <div class="flex flexdc flexcenter">
                <div class="entryName m-b-20">
                  <span class="AprA-name"><span class="mustval">*</span>监管局名称：</span>
                  <el-input v-model="form.name" class="entry-input co-input" placeholder="请输入监管局名称" />
                </div>
                <div class="entryName m-b-20">
                  <span class="AprA-name"><span class="mustval">*</span>监管局简称：</span>
                  <el-input v-model="form.nameSimple" class="entry-input co-input" placeholder="请输入监管局简称" />
                </div>
                <div class="maType m-b-20">
                  <span class="name"><span class="mustval">*</span>联系人：</span>
                  <el-input v-model="form.contacts" class="entry-input co-input" placeholder="请输入联系人姓名" />
                </div>
                <div class="category m-b-20">
                  <span class="name"><span class="mustval">*</span>联系人电话：</span>
                  <el-input v-model="form.phone" class="entry-input co-input" placeholder="请输入联系电话" />
                </div>
                <div class="category m-b-20">
                  <span class="name"><span class="mustval">*</span>联系人地址：</span>
                  <el-input v-model="form.address" class="entry-input co-input" placeholder="请输入联系人地址" />
                </div>
              </div>
              <div class="row-regionCode flex flexac">
                <span class="regionCode name"><span class="mustval">*</span>区域代码：</span>
                <div class="city-box">
                  <City class="code-input" :region-code="regionCode" @emitCity="onSendcity" />
                  <!-- <div class="city-model co-model" />
                  <div class="city-model2 co-model" /> -->
                </div>
              </div>
            </div>

            <div class="flex footer m-t-70 m-b-40">
              <el-button v-if="!isEdit" class="saveBtn m-r-30 el-icon-circle-check" @click="handleSave(0)">保 存</el-button>
              <el-button v-else type="success" class="m-r-30 btn el-icon-circle-check" @click="handleSave(1)">更 新</el-button>
              <el-button class="clsoeBtn el-icon-circle-close" @click="handleCloseDialog">关 闭</el-button>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import { showNotice } from '@/utils/toolclass'
import { createSuperAdd, updateSuperArticle } from '@/api/baseInfo/superviseunit'
import City from '@/components/city/index'
import bus from '@/utils/bus'

export default {
  components: { City },
  props: {
    isEdit: {
      type: Boolean,
      default: false
    },
    value: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      visible: false,
      formOrigin: {
        address: '', // 地址
        contacts: '', // 联系人
        id: 0, // ID
        name: '', // 监管机构名称
        nameSimple: '', // 监管机构简称
        parentId: '', // 父级ID
        phone: '', // 联系电话
        regionCode: '', // 区域代码
        remark: '', // 备注
        version: '' // 版本号
      },
      form: { ...this.data },
      regionCode: {
        province: 430000,
        city: 430100,
        area: ''
      }
    }
  },
  watch: {
    visible(v) {
      this.$emit('input', v)
    },
    value(v) {
      this.visible = v
    },
    data(v) {
      if (v.id === 0) {
        this.form = { ...this.formOrigin }
      } else {
        this.form = { ...v }
      }
    }
  },
  created() {
    this.onSendCoordinate()
    this.onCloseCoordinate()
  },
  mounted() {},
  methods: {
    // 保存
    handleSave(t) {
      if (!(/^\S+$/.test(this.form.name))) {
        showNotice('error', '提示', '请输入监管机构名称')
        return
      }
      if (!(/^\S+$/.test(this.form.nameSimple))) {
        showNotice('error', '提示', '请输入监管机构简称')
        return
      }
      if (!(/^\S+$/.test(this.form.contacts))) {
        showNotice('error', '提示', '请输入联系人姓名')
        return
      }
      if (!(/^\S+$/.test(this.form.phone))) {
        showNotice('error', '提示', '请输入联系人电话')
        return
      } else if (!(/^1[3456789]\d{9}$/.test(this.form.phone))) {
        showNotice('error', '提示', '手机号格式错误，请重新输入')
        return
      }
      if (!(/^\S+$/.test(this.form.address))) {
        showNotice('error', '提示', '请输入联系人地址')
        return
      }
      if (this.form.regionCode.area === undefined) {
        showNotice('error', '提示', '请选择区域')
        return
      }
      const params = {
        address: this.form.address, // 地址
        contacts: this.form.contacts, // 联系人
        id: this.form.id, // ID
        name: this.form.name, // 监管机构名称
        nameSimple: this.form.nameSimple, // 监管机构简称
        parentId: this.form.parentId, // 父级ID
        phone: this.form.phone, // 联系电话
        regionCode: this.form.regionCode.area, // 区域代码
        remark: this.form.remark, // 备注
        version: this.form.version // 版本号
      }
      // console.log(params)
      // console.log(this.form.regionCode.area)
      if (t === 0) {
        this.handleCreateAdd(params)
      } else {
        this.handleUpdate(params)
      }
    },
    // 新增监管单位
    handleCreateAdd(data) {
      createSuperAdd(data).then(res => {
        if (res.code === '000000') {
          showNotice('success', '提示', '添加成功')
          this.$emit('handleRefresh')
          this.$emit('handleCloseDialog')
        } else {
          if (res.msg === '失败') {
            showNotice('error', '提示', '添加失败')
          } else {
            showNotice('error', '提示', res.msg)
          }
        }
      })
    },
    // 修改监管单位
    handleUpdate(data) {
      updateSuperArticle(data).then(res => {
        if (res.code === '000000') {
          showNotice('success', '提示', '更新成功')
          this.$emit('handleRefresh')
          this.$emit('handleCloseDialog')
        } else {
          if (res.msg === '失败') {
            showNotice('error', '提示', '更新失败')
          } else {
            showNotice('error', '提示', res.msg)
          }
        }
      })
    },
    // 关闭弹窗
    handleCloseDialog() {
      this.visible = !this.visible
    },
    // 省市区三级联动
    onSendCoordinate() {
      bus.$on('sendCoordinate', (data) => {
        this.form.longitude = data.lng
        this.form.latitude = data.lat
        this.handleCloseCoordinate()
      })
      bus.$on('sendCoordinateAddress', (data) => {
        this.form.address = (data.province === undefined ? '' : data.province) + '' + (data.city === undefined ? '' : data.city) + '' + (data.title === undefined ? '' : data.title)
        this.form.name = (data.title === undefined ? '' : data.title)
      })
    },
    onCloseCoordinate() {
      bus.$on('closeCoordinate', (data) => {
        this.handleCloseCoordinate()
      })
    },
    onSendcity(res) {
      this.form.regionCode = res
    }
  }
}
</script>

<style rel='stylesheet/scss' lang='scss'>
@import "@/styles/public.scss";
.item {
  .item-container {
    width: 800px;
    background: #ffffff;
    margin-left: -200px;
    margin-top: 200px;
    .item-content {
      .item-main {
        min-height: 400px;
        .category {
          margin-left: -28px;
        }
      }
      .AprA-name {
        margin-left: -28px;
      }
      .row-regionCode {
            margin-left: 32px;
            .regionCode {
              margin-right: 4px;
            }
            .city-box {
              position: relative;
              .code-input {
                .dist {
                  label {
                    select {
                      width: 100px;
                      option {}
                    }
                  }
                }
              }
              .co-model {
                position: absolute;
                top: 0;
                width: 100px;
                height: 40px;
                border-radius: 3px;
                background: rgba(200, 200, 200, .5);
              }
              .city-model {
                left: 0;
                }
              .city-model2 {
                left: 104px;
              }
            }
          }
    }
  }
}
</style>
